{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
<!--数据列表页面-->
<section class="content">
    <style>
        /* 设置表格样式 */
        table {
            border-collapse: separate; /* 使单元格之间的边框分离 */
            border-spacing: 10px; /* 设置单元格之间的间距为10px */
            text-align: center;
        }

        /* 设置单元格内的文本样式 */
        table td {
            border: 1px solid black; /* 为单元格添加边框 */
            padding: 10px; /* 设置单元格内的填充为10px */
        }
    </style>
    <!--顶部搜索筛选-->
    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-body">
                    <form class="form-inline searchForm" id="searchForm" action="{:url('index')}" method="GET">

                        <div class="form-group" style="padding-top: 3px;">
                            <input id="fromUserId"  class="form-control input-sm" style="width: 350px;"
                                   placeholder="请输入您想要搜索的发送方融云id号">
                            <input id="from_me_uid"  class="form-control input-sm" style="width: 350px;"
                                   placeholder="请输入您想要搜索的发送方用户uid号">
                            <input id="toUserId"  class="form-control input-sm" style="width: 350px;"
                                   placeholder="请输入您想要搜索的接收方融云id号">
                            <input id="to_me_uid"  class="form-control input-sm" style="width: 350px;"
                                   placeholder="请输入您想要搜索的接收方用户uid号">

                            <input id="start_time" type="date" class="form-control input-sm" style="width: 350px;"
                                   placeholder="请输入您想要搜索的开始时间">

                            <input id="end_time" type="date" class="form-control input-sm" style="width: 350px;"
                                   placeholder="请输入您想要搜索的结束时间">
                        </div>

                        <div class="form-group" style="padding-top: 3px;">
                            <button class="btn btn-sm btn-primary" type="button" onclick="searchBtn()" ><i class="fa fa-search"></i> 查询
                            </button>
                        </div>
                        <div class="form-group">
                            <button onclick="clearSearchForm2()" class="btn btn-sm btn-default" type="button"><i
                                    class="fa  fa-eraser"></i> 清空查询
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12" style="overflow-x: scroll">
            <div style="display: flex;width: 80%;margin: auto;font-size: 18px;">
                <div style="width: 50%;display: none">聊天总人数：<span id="total">0</span> 人 （男性：<span id="man">0</span>人，女性： <span id="woman">0</span>人）</div>
            </div>
            <br>
            <div style="display: flex;width: 80%;margin: auto;font-size: 16px;">
                <div style="width: 50%;display:none;">发送方总人数：<span id="from_total">0</span> 人 （男性：<span id="from_nan">0</span>人，女性： <span id="from_nv">0</span>人）</div>
                <div style="width: 50%">接收方总人数：<span id="to_total">0</span> 人（男性：<span id="to_nan">0</span>人，女性： <span id="to_nv">0</span>人）</div>
            </div>



            <div id="list" style="display: flex;width: 105%; " class="box">
                <table style="width: 75%;margin: 30px; display: none; text-align: center">
                    <tr>
                        <td>头像</td>
                        <td>昵称</td>
                        <td style="display: none">性别</td>
                        <td>ID</td>
                        <td>最近聊天时间</td>
                        <td style="display:none;">最后提现时间</td>
                        <td style="display:none;">最后提现金额</td>
                        <td style="display:none;">提现总金额</td>
                        <td>最后充值时间</td>
                        <td>最后充值金额</td>
                        <td>充值总金额</td>
                        <td>今日关联人数</td>
                        <td>名下关联总人数</td>
                        <td>操作</td>

                    </tr>
                    <tbody id="from_user">

                    </tbody>
                </table>

                <table style="width: 75%;margin: 30px;text-align: center">
                    <tr>
                        <td>头像</td>
                        <td>昵称</td>
                        <td style="display: none">性别</td>
                        <td>ID</td>
                        <td>最近聊天时间</td>
                        <td style="display:none;">最后提现时间</td>
                        <td style="display:none;">最后提现金额</td>
                        <td style="display:none;">提现总金额</td>
                        <td>最后充值时间</td>
                        <td>最后充值金额</td>
                        <td>充值总金额</td>
                        <td>今日关联人数</td>
                        <td>名下关联总人数</td>
                        <td>操作</td>

                    </tr>
                    <tbody id="to_user">

                    </tbody>
                </table>




            </div>
        </div>
    </div>

    <div id="tan" style="position:fixed;top:40%;left:47.5%;width: 300px; color: white; height: 100px;background-color: #000;opacity: 0.8; font-size: 20px; border-radius: 5px; text-align: center;line-height: 100px;display: none">数据加载中，请稍候!!</div>
</section>
<script>

    var fromUserId2  = "{$fromUserId}";
    var toUserId2  = "{$toUserId}";
    if(fromUserId2){
        $("#fromUserId").val(fromUserId2)
    }
    if(toUserId2){
        $("#toUserId").val(toUserId2)
    }

    if(fromUserId2||toUserId2){
        searchBtn()
    }

function searchBtn() {
    var fromUserId  = $("#fromUserId").val();
    var from_me_uid  = $("#from_me_uid").val();
    var toUserId  = $("#toUserId").val();
    var to_me_uid  = $("#to_me_uid").val();
    $("#tan").show();
    $.ajax({
        url: "{:url('fachat/lists')}",
        type: "POST",
        dataType:'JSON',
        data:{"fromUserId":fromUserId,"from_me_uid":from_me_uid,"toUserId":toUserId,"to_me_uid":to_me_uid,"start_time":$("#start_time").val(),"end_time":$("#end_time").val()},
        success: function (result) {
            $("#total").html(result.total)
            $("#man").html(result.man)
            $("#woman").html(result.woman)
            $("#from_total").html(result.from_total)
            $("#from_nan").html(result.from_nan)
            $("#from_nv").html(result.from_nv)
            $("#to_total").html(result.to_total)
            $("#to_nan").html(result.to_nan)
            $("#to_nv").html(result.to_nv)
            $("#from_user").html(result.from_user)
            $("#to_user").html(result.to_user)
            $("#tan").hide();
        }
    });
}

function clearSearchForm2() {
    $("#fromUserId").val('');
    $("#from_me_uid").val('');
    $("#toUserId").val('');
    $("#to_me_uid").val('');
    $("#start_time").val('');
    $("#end_time").val('');
}

function info(fromUserId,toUserId) {
    window.location.href="{:url('fachat/info')}?fromUserId="+fromUserId+"&toUserId="+toUserId;
}
</script>
{/block}

